// 注意顺序
var allFiles = [
    // jQuery
    'statics/js/jquery-3.5.1.min.js',
    // 'static/framework/jquery/jquery.cookie.js',
    // css
    'statics/css/main.css',
    'statics/css/index.css',
    'statics/css/report.css',
    // js
    'statics/js/index.js',
    'statics/js/report.js',
    'statics/js/main.js',
    
];

/**
 * 全局加载
 */
dororoFrameworkImportAll(allFiles);


/**
 * //TODO 三个方法组合为功能函数：js调用其他js或者css文件，实现批量导入
 * 导入本js需要在其他js之前，如此才能调用当前方法
 * @param allFiles
 */
// =========================================================================================================================
function dororoFrameworkImportAll(allFiles) {
    //如果是字符串则认为是单个文件，直接导入即可
    if (allFiles.constructor == String) {
        dororoFrameworkCreat(allFiles);
    }
    //如果是数组，则需要保证在前一个导入成功后再导入下一个js/css文件
    if (allFiles.constructor == Array) {
        dororoFrameworkLoop(allFiles, 0);
    }
}

/**
 *  //TODO 关键递归函数：利用递归处理数组的判断工作
 * @param allFiles  数组
 * @param i 下标
 * 参考资料：根据https://www.cnblogs.com/shuilangyizu/p/12525082.html进行改造
 */
function dororoFrameworkLoop(allFiles, index) {
    let currentImpurter = dororoFrameworkCreat(allFiles[index]);//执行导入
    //如果还不是数组的最后一个，则继续导入操作
    if ((index + 1) < allFiles.length) {
        //判断当前导入的元素是否导入成功，参考资料：https://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html
        currentImpurter.onload = currentImpurter.onreadystatechange = function () {
            //如果currentImpurter加载成功则创建下一个引入，这样就不会由于后面的js依赖前面的js导致后面的js先加载而导致程序报错，
            //最常见的就是jQuery
            if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
                //递归
                dororoFrameworkLoop(allFiles, index + 1);//通过i+1实现循环
            }
        }
    }
}

/**
 *
 * @param file 期望导入的js、css文件的路径字符串
 * @returns {HTMLElement} js对象，用于在其他方法里面判断其创建成功与否
 * 参考资料：https://www.cnblogs.com/aui-js/p/12144946.html
 */
function dororoFrameworkCreat(uri) {
    //JS文件引入
    if (/^.+?\.js$/.test(uri)) {
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src", uri);
        document.querySelector('head').appendChild(script);
        return script;
    }
    //CSS文件引入
    if (/^.+?\.css$/.test(uri)) {
        var css = document.createElement('link');
        css.rel = 'stylesheet';
        css.type = 'text/css';
        css.href = uri;
        document.querySelector('head').appendChild(css);
        return css;
    }
}

// =========================================================================================================================
